<template>
  <div>
    <!-- 
      为什么要用计算属性？有什么优势？
      因为计算属性有缓存，当第一次使用计算属性的时候，会将计算结果缓存起来
      那么再次使用该计算属性的时候，直接从缓存中获取结果，而不会触发计算属性函数

      只要计算属性的依赖项没有改变，那么都是从缓存中获取结果
      依赖项改变了，则重新计算结果并缓存

     -->
    <h1>{{ reverseMsg }}</h1>
    <h1>{{ reverseMsg }}</h1>
    <h1>{{ reverseMsg }}</h1>
    <h1>{{ getMessage() }}</h1>
    <h1>{{ getMessage() }}</h1>
    <h1>{{ getMessage() }}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {
      message: "hello world"
    }
  },
  methods: {
    getMessage(){
      console.log("调用了函数");
      return this.message.split("").reverse().join("")
    }
  },
  computed:{
    reverseMsg(){
      console.log("计算属性");
      return this.message.split("").reverse().join("")
    }
  }
}
</script>

<style>

</style>